<script setup>
import request from "../../utils/request";
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import config from "../../../config";

const route = useRoute()
const router = useRouter()  // ---   

const id = route.query.id
const num = ref(1)
const activeImg = ref('')
const newDate = new Date()
const tomorrowDate = new Date(newDate.getTime() + (24*3600*1000))  // (24*3600*1000)一整天
// 注意：tomorrowDate.getMonth() 返回0-11
const tomorrow = (tomorrowDate.getMonth() + 1) + '月' + tomorrowDate.getDate() + '日'

const state = reactive({
  goods: {}
})

const changeImg = (url) => {
  activeImg.value = url
}

const load = () => {
  request.get('/goods/' + id).then(res => {
    state.goods = res.data
    activeImg.value = state.goods.imgs[0].url
  })
}
load()

// 添加购物车
const addCart = () => {
  // 拿到当前页面的数据
  request.post('cart',{
    goodsId: state.goods.id,
    num: num.value
  }).then(res => {
    if (res.code === '200') {
      ElMessage.success('添加成功')
    }else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<template>
  <h1>我是你的爹</h1>
  <div>
    <div style="display: flex">
      <div style="flex: 1" v-if="state.goods.imgs">
        <img :src="activeImg" style="width: 100%; height: 320px">
      
<!--      小图片切换卡-->
        <div style="display: flex;">
          <img style="width: 100px; height:100px; margin-right: 5px" 
               :src="item.url" v-for="item in state.goods.imgs" :key="item.url"
               @mouseover="changeImg(item.url)" :class="{ 'activeImg': item.url === activeImg }"
          >
        </div>
      </div>
      
      <div style="padding-left: 20px; flex: 2">
        <el-card>
          <div style="font-size: 20px; font-weight: bold">{{ state.goods.name }}</div>
          <div style="margin: 10px 0; font-size: 12px; color: #888888">{{ state.goods.descr }}</div>
          <div style="margin: 10px 0">
            <el-row :gutter="20">
              <el-col :span="4" style="text-align: center"><div class="text">价格</div></el-col>
              <el-col :span="20" style="color: orangered; font-size: 18px; line-height: 20px">
                $ {{ state.goods.price }}/{{ state.goods.unit }}
              </el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20">
              <el-col :span="4" style="text-align: center"><div class="text">剩余库存</div></el-col>
              <el-col :span="20">{{ state.goods.store }} {{ state.goods.unit }}</el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20">
              <el-col :span="4" style="text-align: center"><div class="text">增值服务</div></el-col>
              <el-col :span="20"><span style="color: dodgerblue">
                <el-icon><Refresh /></el-icon>免费上门，免费送货，免费物流
              </span></el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20">
              <el-col :span="4" style="text-align: center"><div class="text">物流服务</div></el-col>
              <el-col :span="20"><span style="color: green">
                <el-icon><MessageBox /></el-icon>由 顺丰 发货，并提供售后服务，现在下单，预计明日({{ tomorrow }})送达 
              </span></el-col>
            </el-row>
          </div>

          <div style="margin: 10px 0">
            <el-row :gutter="20">
              <el-col :span="4" style="text-align: center"><div class="text">物品重量</div></el-col>
              <el-col :span="20"><span style="color: deeppink">
                <el-icon><Cellphone /></el-icon>不计重量</span>
              </el-col>
            </el-row>
          </div>

          <div style="margin: 18px 0; display: flex">
            <div style="width: 140px">
              <el-input-number v-model="num" :min="1" :max="10" size="large"  style="width: 140px" />
            </div>
            
            <div style="flex: 1; padding-left: 20px">
              <el-button size="large" style="background-color: red; color: white" @click="addCart">
                <el-icon><ShoppingTrolley /></el-icon> 加入购物车
              </el-button>
            </div>
          </div>

          <div style="margin: 10px 0; font-size: 12px; color: #888888">
            温馨提示： 本商品支持七天无理由退货！
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text {
  width: 100%;
  display: inline-block;
  text-align-last: justify;
}
.activeImg {
  border: 1px solid red;
}
</style>
